@import "tailwindcss" important;

/* Custom animations for chat box states */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80% { transform: translateX(2px); }
}

@keyframes gradient-animation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

stagewise-companion-anchor {
  all: initial;
  @apply text-zinc-950;
  font-family: "Inter", "Noto Color Emoji", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "SF Compact", "SF Pro", "Helvetica Neue", sans-serif !important;
  font-weight: normal !important;
  letter-spacing: normal !important;
  line-height: normal !important;
  text-rendering: auto !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  interpolate-size: allow-keywords;
}

@layer base {
  stagewise-companion-anchor * {
    min-height: 0;
    min-width: 0;
    position: relative;
  }
}

@layer utilities {
  .animate-shake {
    animation: shake 0.5s ease-in-out 2;
  }
}

@layer components {
  /* Chat box loading gradient border */
  .chat-loading-gradient {
    background: linear-gradient(rgb(248 250 252 / 0.8), rgb(248 250 252 / 0.8)) padding-box,
                linear-gradient(45deg, #8b5cf6, #06b6d4, #8b5cf6) border-box;
    background-size: auto, 400% 400%;
    animation: gradient-animation 2s ease infinite;
    border: 2px solid transparent;
  }

  /* Success and error animations */
  .chat-success-border {
    animation: blink-green-fade 2s ease-out;
  }

  .chat-error-border {
    animation: blink-red-fade 1s ease-out;
  }

  @keyframes blink-green-fade {
    0%, 50% {
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.7);
    }
    100% {
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0);
    }
  }

  @keyframes blink-red-fade {
    0%, 50% {
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 1);
    }
    100% {
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0);
    }
  }
}

@supports (font-variation-settings: normal) {
  stagewise-companion-anchor {
    font-family: "InterVariable", "Noto Color Emoji", -apple-system,
      BlinkMacSystemFont, "Segoe UI", Roboto, "SF Compact", "SF Pro",
      "Helvetica Neue", sans-serif !important;
    font-optical-sizing: auto !important;
  }
}

@theme default {
  --color-background: var(--color-white);
  --color-foreground: var(--color-zinc-950);
  --color-muted: var(--color-zinc-100);
  --color-muted-foreground: var(--color-zinc-700);
  --color-border: var(--color-zinc-500);
}

#headlessui-portal-root {
  @apply fixed h-screen w-screen z-50;
}

#headlessui-portal-root > * {
  @apply pointer-events-auto;
}
